<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <form method="post" action="">
    你爱好的运动是？
    <input type="checkbox" id="checkedAllBox"> 全选 / 全不选
    <br>
    <input type="checkbox" name="sports" value="足球">足球
    <input type="checkbox" name="sports" value="篮球">篮球
    <input type="checkbox" name="sports" value="羽毛球">羽毛球
    <input type="checkbox" name="sports" value="乒乓球">乒乓球
    <br>
    <input type="button" id="chooseAllBtn" value="全选">
    <input type="button" id="chooseNoBtn" value="全不选">
    <input type="button" id="chooseReverseBtn" value="反选">
    <input type="button" id="submitBtn" value="提交">
    <!-- <button id="chooseAllBtn">全选</button>
    <button id="button2">全不选</button>
    <button id="button3">反选</button>
    <button id="button4">提交</button> -->
  </form>
  <script type="text/javascript">
    window.onload = function () {
      // 获取全选按钮
      var checkedAllBox = document.getElementById('checkedAllBox')
      // 获取运动多选框
      var sports = document.getElementsByName('sports')

      
      // 1. 点击全选按钮
      var chooseAllBtn = document.getElementById('chooseAllBtn')
      chooseAllBtn.onclick = function () {
        for (var i=0;i<sports.length;i++) {
          sports[i].checked = true;
        }
        checkedAllBox.checked = true
      };

      // 2. 全不选按钮
      var chooseNoBtn = document.getElementById('chooseNoBtn')
      chooseNoBtn.onclick = function () {
        for (var i=0;i<sports.length;i++) {
          sports[i].checked = false;
        }
        checkedAllBox.checked = false
      }

      // 3. 反选按钮(这个逻辑要记住)
      var chooseReverseBtn = document.getElementById('chooseReverseBtn')
      chooseReverseBtn.onclick = function () {

        checkedAllBox.checked = true
          for (var i=0;i<sports.length;i++) {
            sports[i].checked = !sports[i].checked
            // 一旦存在没被选中的，全选按钮就取消
            if (!sports[i].checked) {
              checkedAllBox.checked = false
            }
         }
      };

      /*
		 * 4. 提交按钮：
		 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
		 */
      var submitBtn = document.getElementById('submitBtn')
      submitBtn.onclick = function () {
        for (var i=0;i<sports.length;i++) {
          if (sports[i].checked)
            alert(sports[i].value)
        }
      };

		/*
		 * 全选/全不选 多选框
		 * 	- 当它选中时，其余的也选中，当它取消时其余的也取消
		 * 
		 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
		 */
    // 5. 全选框(这个也很重要，点一次全选，再点一次全不选)
    checkedAllBox.onclick = function () {
      // alert(this.checked)
      for (var i=0;i<sports.length;i++) {
        sports[i].checked = this.checked;
      }
    };

    		/*
		 * 如果四个多选框全都选中，则checkedAllBox也应该选中
		 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
		 */
    // 6. 四个多选框(这个逻辑也很重要)
    for (var i=0;i<sports.length;i++) {
      sports[i].onclick = function () {
        checkedAllBox.checked = true
        for (var j=0;j<sports.length;j++) {
          					//判断四个多选框是否全选
					//只要有一个没选中则就不是全选
          if (!sports[j].checked) {
            	//一旦进入判断，则证明不是全选状态
						//将checkedAllBox设置为没选中状态
            checkedAllBox.checked = false
            break;
          }
        }
      }
    }
      



    }
  </script>
</body>
</html>